<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		
		<title>Befragungssystem</title>
				
		<link href="css/my_layout.css" rel="stylesheet" type="text/css" />
		<!--[if lte IE 7]>
		<link href="css/patches/patch_my_layout.css" rel="stylesheet" type="text/css" />
		<![endif]-->
        
		<script type="text/javascript" src="js/jquery-1.5.min.js"></script>
		<script type="text/javascript" src="js/jquery-ui-1.8.9.custom.min.js"></script>
		<script type="text/javascript" src="js/jquery.tmpl.js"></script>
        
		<script type="text/javascript" src="js/knockout-latest.js"></script>
		<script type="text/javascript" src="js/knockout.mapping.js"></script>
		
        <script type="text/javascript" src="js/mustache.js-0.3.0/mustache.js"></script>
        <script type="text/javascript" src="js/ICanHaz.js-0.9/ICanHaz.js"></script>
		                
        <script type="text/javascript" src="js/sammy/sammy.js"></script>
		
		<script type="text/javascript" src="js/jquery.ba-bbq.min.js"></script>
		
		<script type="text/javascript" src="js/jquery.dataTables.js"></script>
        
		<script type="text/javascript" src="js/editable.js"></script>
		
		<script type="text/javascript" src="js/questionnaireApp.js"></script>
		<script type="text/javascript" src="js/questionnairesView.js"></script>
        <script type="text/javascript" src="js/questionnairesApp.js"></script>
        
        <!-- Questionnaires Overview -->		
		<script id="questionnairesTable" type="text/html">
        	<div class="appStatus"></div>
			<div style="margin-bottom: 1em;">
				<strong><a href="#/questionnaire/new" title="Klicken Sie hier um einen neuen Fragebogen zu erstellen.">neuen Fragebogen erstellen</a></strong>
			</div>
        	<div id="questionnairesTableArea">
        	<table id="questionnairesTable" class="shadowed table display" cellpadding="0" cellspacing="0" border="0">
        		<thead>
        			<tr>
        				<th>Titel</th>
        			</tr>
        		</thead>
				<tbody>
		            {{#aoQuestionnaires}}
						<tr>
	                		<td><strong><a href="#/questionnaire/{{_id}}">{{title}}</a></strong></span></td>
						</tr>
		            {{/aoQuestionnaires}}
				</tbody>				
        	</table>
			</div>
		</script>
		
		<!-- Questionnaire Frame -->
		<script id="questionnaireFrameTemplate" type="text/x-jquery-tmpl">
        	<div class="appStatus"></div>
			<div style="width: 100%; overflow: hidden; margin-bottom: 1%;"
				 data-bind="template: 'questionnaireHeaderTemplate'">
			</div>
			<div class="questionnaireFrame">
				<span id="questionBlockMenu"
					 data-bind="template: 'questionBlockMenuTemplate'" />
				<span id="questionnaireContainer"
					 data-bind="template: {name: 'questionnaireTemplate', afterRender: postProcessUI}" />
			</div>
		</script>
		
		<!-- Questionnaire Header -->
		<script id="questionnaireHeaderTemplate" type="text/x-jquery-tmpl">			
        	<span id="backLinkContainer"><strong><a href="#/">zurück zur Fragebogenübersicht</a></strong></span>			
			<span id="saveQuestionnaireButtonContainer">
				<form action="#/questionnaire/${_id}" method="post">
					<button id="saveQuestionnaireButton">Speichern</button>
				</form>
			</span>
		</script>
				
			<!-- Question Block Menu -->	
			<script id="questionBlockMenuTemplate" type="text/x-jquery-tmpl">
				<div style="width: 100%; overflow: hidden; clear: both;">
					<span class="ui-icon ui-icon-plus addButton"
						  data-bind="click: addQuestionBlock"
						  style="float: left;"
						  title="Einen Fragenblock hinzufügen">
					</span>
					{{if questionBlocks().length > 0 }}
					<span style="float: right;">
						<span data-bind="click: moveUp"
							  class="ui-icon ui-icon-arrow-1-n moveUpQB"
							  style="float: left;"
							  title="Ausgewählten Fragenblock nach oben verschieben" />
						<span data-bind="click: moveDown"
							  class="ui-icon ui-icon-arrow-1-s moveDownQB"
							  style="float: left;"
							  title="Ausgewählten Fragenblock nach unten verschieben" />
						<span class="ui-icon ui-icon-radio-on addSF"
							  style="float: left;"
						      data-bind="click: selectedQuestionBlock().addSingleChoiceQuestion"
						      title="Eine Single-Choice-Frage zu diesem Fragenblock hinzufügen" />
						<span class="ui-icon ui-icon-grip-dotted-horizontal addSMF"
							  style="float: left;"
			 			      data-bind="click: selectedQuestionBlock().addSingleChoiceMatrixQuestion"
						      title="Eine Single-Choice-Matrix-Frage zu diesem Fragenblock hinzufügen" />
						<span class="ui-icon ui-icon-script addTF"
							  style="float: left;"
						      data-bind="click: selectedQuestionBlock().addTextQuestion"
						      title="Eine Textfrage zu diesem Fragebogen hinzufügen" />
					</span>
					{{/if}}
				</div>
				<ol style="padding-left:0;">
				{{each(i, qb) questionBlocks}}
					<li class="questionBlockMenuItem"
						style="">
						{{if qb.selected}}<strong>{{/if}}
							<a data-bind="click: qb.select">${qb.title}</a>
						{{if qb.selected}}</strong>{{/if}}
					</li>
				{{/each}}
				</ol>
			</script>
		
			<!-- Questionnaire -->	
			<script id="questionnaireTemplate" type="text/x-jquery-tmpl">
				<div id="questionnaireDetailsContainer">
					<div class="paddingHelper">
						<h2 id='questionnaireTitle'>
							<input type="text"
								   style="width: 99%"
								   data-bind="value: title" />
						</h2>
						<textarea id='questionnaireDescription'
								  rows="3" style="resize:none; width:99%;"
								  data-bind="value: description" />
					</div>
				</div>
				<hr />
				<div id="questionBlock">			
					<span data-bind="template: {name: 'questionBlockTemplate', data: selectedQuestionBlock, afterRender: postProcessUI}"/>
				</div>
			</script>
		
				<!-- Question Block -->	
		        <script id="questionBlockTemplate" type="text/x-jquery-tmpl">
		        	<div style="width: 100%;">        		
		        		<div id='questionBlockTitleContainerEdit'>
		        			<span id='questionBlockTitleEdit'>
								<div class="paddingHelper">
									<input type="text" data-bind="value: title" style="width:99%;" />
								</div>
							</span>
							<span style="float: right;">
								<div class="ui-icon ui-icon-minus removeButton"
							     	 data-bind="click: trash"
								  	 title="Diesen Fragenblock entfernen"/>
								
							</span>
		        		</div>
						<div id='questionBlockEdit'
						     data-bind="template: {name: questionTemplateID, foreach: questions, afterRender: postProcessUI}" />
					</div>
		        </script>
				
					<!-- Single Choice Question -->	
					<script id="singleChoiceQuestion" type="text/x-jquery-tmpl">
						<div class="question">
							<span class="questionTitleContainerEdit">								         
								<div class="paddingHelper">									
									<input type="text" data-bind="value: title" style="width:99%; margin-bottom: 1%;" />																
									<div data-bind="template: {name: 'singleSelectableAnswerTemplate', foreach: answers, afterRender: postProcessUI}"
										 class="selectableAnswersContainerEdit" />
									<div data-bind="click: addAnswer"
									 	 class="addAnswerButton ui-icon ui-icon-plus addButton"
									     title="Eine Antwortmöglichkeit zu dieser Frage hinzufügen"/>
								</div>
							</span>
							<span class="ui-icon ui-icon-minus removeButton"
								  style="float: right;"
							      data-bind="click: trash"
								  title="Diese Frage entfernen"/>
						</div>
			        </script>
					
						<!-- Single Choice Answer -->	
						<script id="singleSelectableAnswerTemplate" type="text/x-jquery-tmpl">
							<div class="answerContainerEdit">
								<span class="removeAnswerButton ui-icon ui-icon-minus removeButton" style="float:left;"
								      data-bind="click: trash"
									  title="Diese Antwortmöglichkeit entfernen"/>								
								<span style="width:95%; float:right;">
									<input type="text" data-bind="value: title" style="width:99%;" />
								</span>						
							</div>
				        </script>
					
					<!-- Single Choice Matrix Question -->	
					<script id="singleChoiceMatrixQuestion" type="text/x-jquery-tmpl">
						<div class="question">
							<span class="questionTitleContainerEdit">								
								<div class="paddingHelper">
									<span class="matrixQuestionTitlesContainerEdit">
										<div style="width: 100%;"
											 data-bind="template: {name: 'singleChoiceMatrixQuestionTitleTemplate', foreach: titles, afterRender: postProcessUI}"/>
										<div data-bind="click: addTitle"
											 class="addTitleButton ui-icon ui-icon-plus addButton"
										 	 title="Eine Frage zu dieser Matrix hinzufügen" />
									</span>
									<span class="matrixQuestionAnswersContainerEdit">
										<div style="width: 100%;"
											 data-bind="template: {name: 'singleChoiceMatrixQuestionAnswerTemplate', foreach: answers, afterRender: postProcessUI}"/>
										<div data-bind="click: addAnswer"
											 class="addAnswerButton ui-icon ui-icon-plus addButton"
										 	 title="Eine Antwortmöglichkeit zu dieser Matrix hinzufügen" />
									</span>						
								</div>
							</span>	
							<span class="removeMatrixQuestionButton ui-icon ui-icon-minus removeButton"
								  data-bind="click: trash"
								  title="Diese Frage aus der Matrix entfernen" />
						</div>
			        </script>
					
						<!-- Single Choice Matrix Question Title -->	
						<script id="singleChoiceMatrixQuestionTitleTemplate" type="text/x-jquery-tmpl">
							<div class="matrixLine">
								<span class="removeMatrixQuestionTitleButton ui-icon ui-icon-minus removeButton" style="float:left;"
								      data-bind="click: trash"
									  title="Diese Frage aus der Matrix entfernen" />
								<span style="width:90%; float:right;">
									<input type="text" data-bind="value: title" style="width:99%;" />
								</span>
							</div>
				        </script>
						
						<!-- Single Choice Matrix Answer-->	
						<script id="singleChoiceMatrixQuestionAnswerTemplate" type="text/x-jquery-tmpl">
							<div class="matrixLine">
								<span class="removeAnswerButton ui-icon ui-icon-minus removeButton" style="float:left;"
								      data-bind="click: trash"
									  title="Diese Antwortmöglichkeit aus der Matrix entfernen" />
								<span style="width:92%; float:right;">
									<input type="text" data-bind="value: title" style="width:99%;" />
								</span>
							</div>
				        </script>
					
					<!-- Text Question -->	
					<script id="textQuestion" type="text/x-jquery-tmpl">
						<div class="question">
							<span class="questionTitleContainerEdit">								
								<div class="paddingHelper">
									<input type="text" data-bind="value: title" style="width:99%;" />
								</div>
								<div class="paddingHelper">
									<textarea rows="8" disabled="true" style="resize:none; width:99%;">Antwort</textarea>
								</div>
							</span>
							<span class="ui-icon ui-icon-minus removeButton"
							      style="float:right;"
							      data-bind="click: trash"
								  title="Diese Frage entfernen" />
						</div>
			        </script>
	</head>
	
	<body class="ui-widget">
		<div class="page_margins">		
			<div class="page">
				<div id="header">
					<h1 class="pageTitle">
						b2
					</h1>
                    <h3><a href="userData.php" class="menuItem">Eigene Daten</a>
                        <a href="surveys.php" class="menuItem">Befragungen</a>
                        <strong><a href="questionnaires.php" class="menuItem activeMenuItem">Fragebögen</a></strong>
                        <a href="index.php?method=logout" class="menuItem">Logout</a>
                    </h3>
				</div>
                <div id="content" class="shadowed">
                </div>
		  	</div>
		</div>
	</body>
</html>